<script setup lang="ts">
import type {Table} from '@tanstack/vue-table'
import {computed} from 'vue'
import DataTableFacetedFilter from './DataTableFacetedFilter.vue'
import DataTableViewOptions from './DataTableViewOptions.vue'
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import {XIcon} from "lucide-vue-next";

interface DataTableToolbarProps {
  queryColumnId: string,
  table: Table<Object>,
  filters: Object[]
}

const props = defineProps<DataTableToolbarProps>()

const isFiltered = computed(() => props.table.getState().columnFilters.length > 0)
</script>

<template>
  <div class="flex items-center justify-between">
    <div class="flex flex-1 items-center space-x-2">
      <Input
          placeholder="Filter applications..."
          :model-value="(table.getColumn(queryColumnId)?.getFilterValue() as string) ?? ''"
          class="h-8 w-[150px] lg:w-[250px]"
          @input="table.getColumn(queryColumnId)?.setFilterValue($event.target.value)"
      />
      <DataTableFacetedFilter
          v-for="filter in props.filters"
          :key="filter.columnId"
          :v-if="table.getColumn(filter.columnId)"
          :column="table.getColumn(filter.columnId)"
          :title="filter.title"
          :options="filter.options"
      />

      <Button
          v-if="isFiltered"
          variant="ghost"
          class="h-8 px-2 lg:px-3"
          @click="table.resetColumnFilters()"
      >
        Reset
        <XIcon class="ml-2 h-4 w-4"/>
      </Button>
    </div>
    <DataTableViewOptions :table="table"/>
  </div>
</template>
